<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>最简单的布局</title>
<script type="text/javascript" src="./scripts/jquery-1.9.0.js"></script>

<script type="text/javascript" src="./scripts/jquery-ui/js/jquery-ui-1.10.0.custom.js"></script>
<link rel="stylesheet" type="text/css"	href="./scripts/jquery-ui/css/ui-lightness/jquery-ui-1.10.0.custom.css" />

<script type="text/javascript" src="./scripts/jquery.layout-latest.js"></script>
<link rel="stylesheet" type="text/css"	href="./scripts/layout-default-latest.css" />
<script type="text/javascript" src="./scripts/debug.js"></script>
<style type="text/css">
	html, body {
		background:	green;
		width:		100%;
		height:		100%;					
		padding:	0;
		margin:		0;
		overflow:	auto; /* when page gets too small */
	}

	
	#container {
		background:	#999;
		min-height:	300px;
		min-width:	600px;
		position:	absolute;
		top:		50px;	/* margins in pixels */
		bottom:		50px;	/* could also use a percent */
		left:		50px;
		right:		50px;
	}
	
	
	.pane {
		display:	none; /* will appear when layout inits */
	}
	</style>

<script type="text/javascript">
var outerLayout;
	$(document).ready(function() {
		outerLayout=	$('#container').layout({
			applyDemoStyles : true
		});
	});
</script>
</head>
<body>
<div id="container">

	<div class="pane ui-layout-center" style="background-color: blue;">中心面板</div>
	<div class="pane ui-layout-north">北面板</div>
	<div class="pane ui-layout-south">南面板</div>
	<div class="pane ui-layout-east">东面板</div>
	<div class="pane ui-layout-west">西面板</div>
	</div>
</body>

</html>